<template>
  <div class="slideSong">
    <img :src="music.pic" alt="">
    <div class="start" @click="play(start)">
        <!-- 通过组件切换控制开关播放 -->
        <svg v-if="start||song.pic!=music.pic"  class="icon" aria-hidden="true" >
            <use xlink:href="#icon-bofangyinle"></use>
        </svg>
        <svg v-else class="icon" aria-hidden="true" >
            <use xlink:href="#icon-zantingyinle"></use>
        </svg>
    </div>
    <div class="text"> 
        <div>{{ music.title }}</div>
        <div>{{ music.author }}</div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data:()=>{
        return {
            flag:true,
            src:require("/public/image/1.jpg"),
            svgStart:"#icon-bofangyinle",
            svgClose:"#icon-zantingyinle",
        }
    },
    methods:{
      play(start){
    if(this.song.pic!=this.$props.music.pic||start){//判断是播放还是暂停
      console.log("点击了播放",this.$props.music);
      this.$store.commit("getSong",this.$props.music)
      this.pushSong()
    }else{
      console.log("点击了暂停");
      this.$store.commit("pause")
    }
    },
    pushSong(){
      this.$store.commit("pushSong",this.$props.music);//发送当前的index
    }
    },
    props:{
      music:{
        title:"",
        author: "",
        url:"",
        pic:"",
        lrc:"",
      },
      index:''
    },
    computed:{
      ...mapState({
        song:state => state.song,
        start:state => state.start
      })
    },
    mounted(){
    }
}
</script>

<style lang="scss" scoped>
@import '../assets/common.scss';
.text{
  margin-left: 1rem;
}
.icon{
  margin:1.6rem 0 0 1.6rem;
  font-size:3rem;
}
div{
  user-select: none;
}
.start{
display:none;
}
  .slideSong:hover .start{
      // border-radius: 0.2rem;
      background-color: rgba(24, 24, 24, 0.255);
      color:$undercolor;
      font-size: 30px;
			display: block;
      width: 90%;
      height: 101%;
      // background: black;
			position: absolute;
      // left:-24%;
			// opacity: 0.3;
      z-index:1;
		}
.slideSong{
    position:relative;
    font-size: 1rem;
    display: flex;
    img{
        width: 6.3rem;
        height: 6.3rem;
        box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;    

    }
    img:hover{
      opacity: 0.6;
    }
}
</style>